<template>
  <div class="article-info">
    <div class="twitter-info pointer" v-if="info.type==='twitter'" @click="viewObjectInfo(info.objectType,info.rowkey,info.objectUri,info.name,info.showName,info.iconUrl,info.belongGroup)">
      <div class="user-container">
        <div class="user-icon pointer">
          <img :src="info.iconUrl" class="user-icon" alt="" @click.stop="viewObjectInfo(info.social.objectType,info.social.rowkey,info.social.objectUri,info.social.name,info.showName,info.social.iconUrl,info.social.belongGroup)">
        </div>
        <div class="user-label pointer">
          <div class="flex-info">
            <h4 @click.stop="viewObjectInfo(info.social.objectType,info.social.rowkey,info.social.objectUri,info.social.name,info.showName,info.social.iconUrl,info.social.belongGroup)">{{info.showName?info.showName:info.displayName}}</h4>
            <span>@{{info.name}}</span>
            <span class="postTime">{{info.postTime}}</span>
          </div>
        </div>
      </div>
      <div class="content">
        {{info.postContent}}
      </div>
      <div class="quantitative-statistics">
        <span class="operation ">
          <i class="fa fa-heart-o"></i>{{info.likeCount}}
        </span>
        <span class="operation ">
          <i class="fa fa-comment-o"></i>{{info.replyCount}}
        </span>
        <span class="operation">
          <i class="fa fa-retweet" style="font-weight:noraml"></i>{{info.forwardCount}}
        </span>
      </div>
    </div>
    <div class="facebook-info pointer" v-if="info.type==='facebook'" @click="viewObjectInfo(info.objectType,info.rowkey,info.objectUri,info.name,info.showName,info.iconUrl,info.belongGroup)">
      <div class="user-container">
        <div class="user-icon pointer">
          <img :src="info.iconUrl" class="user-icon" alt="" @click.stop="viewObjectInfo(info.social.objectType,info.social.rowkey,info.social.objectUri,info.social.name,info.showName,info.social.iconUrl,info.social.belongGroup)">
        </div>
        <div class="user-label pointer">
          <div class="flex-info">
            <h4 @click.stop="viewObjectInfo(info.social.objectType,info.social.rowkey,info.social.objectUri,info.social.name,info.showName,info.social.iconUrl,info.social.belongGroup)">{{info.showName?info.showName:info.displayName}}</h4>
            <span>{{info.name}}</span>
            <span class="postTime">{{info.postTime}}</span>
          </div>
        </div>
      </div>
      <div class="content">
        {{info.postContent}}
      </div>
      <div class="quantitative-statistics">
        <span class="operation ">
          <i class="fa fa-thumbs-o-up"></i>{{info.likeCount}}
        </span>
        <span class="operation ">
          <i class="fa fa-comment-o"></i>{{info.replyCount}}
        </span>
        <span class="operation">
          <i class="fa fa-share" style="font-weight:noraml"></i>{{info.forwardCount}}
        </span>
      </div>
    </div>
    <div class="linkedin-info pointer" v-if="info.type==='linkedin'" @click="viewObjectInfo(info.objectType,info.rowkey,info.objectUri,info.name,info.showName,info.iconUrl,info.belongGroup)">
      <div class="user-container">
        <div class="user-icon pointer">
          <img :src="info.iconUrl" class="user-icon" alt="" @click.stop="viewObjectInfo(info.social.objectType,info.social.rowkey,info.social.objectUri,info.social.name,info.showName,info.social.iconUrl,info.social.belongGroup)">
        </div>
        <div class="user-label pointer">
          <div class="flex-info">
            <h4 @click.stop="viewObjectInfo(info.social.objectType,info.social.rowkey,info.social.objectUri,info.social.name,info.showName,info.social.iconUrl,info.social.belongGroup)">{{info.showName?info.showName:info.displayName}}</h4>
            <span>{{info.name}}</span>
            <span class="postTime">{{(info.postTime)}}</span>
          </div>
        </div>
      </div>
      <div class="content">
        {{info.postContent}}
      </div>
      <div class="quantitative-statistics">
        <span class="operation ">
          <i class="fa fa-thumbs-o-up"></i>{{info.likeCount}}
        </span>
        <span class="operation ">
          <i class="fa fa-comment-o"></i>{{info.replyCount}}
        </span>
        <span class="operation">
          <i class="fa fa-share" style="font-weight:noraml"></i>{{info.forwardCount}}
        </span>
      </div>
    </div>
    <div class="weibo-info pointer" v-if="info.type==='weibo'" @click="viewObjectInfo(info.objectType,info.rowkey,info.objectUri,info.name,info.showName,info.iconUrl,info.belongGroup)">
      <div class="user-container">
        <div class="user-icon pointer">
          <img :src="info.iconUrl" class="user-icon" alt="" @click.stop="viewObjectInfo(info.social.objectType,info.social.rowkey,info.social.objectUri,info.social.name,info.showName,info.social.iconUrl,info.social.belongGroup)">
        </div>
        <div class="user-label pointer">
          <div class="flex-info">
            <h4 @click.stop="viewObjectInfo(info.social.objectType,info.social.rowkey,info.social.objectUri,info.social.name,info.showName,info.social.iconUrl,info.social.belongGroup)">{{info.showName?info.showName:info.displayName}}</h4>
            <span>{{info.name}}</span>
            <span class="postTime">{{info.postTime}}</span>
          </div>
        </div>
      </div>
      <div class="content">
        {{info.postContent}}
      </div>
      <div class="quantitative-statistics">
        <span class="operation ">
          <i class="fa fa-thumbs-o-up"></i>{{info.likeCount}}
        </span>
        <span class="operation ">
          <i class="fa fa-comment-o"></i>{{info.replyCount}}
        </span>
        <span class="operation">
          <i class="fa fa-share" style="font-weight:noraml"></i>{{info.forwardCount}}
        </span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'articleInfo',
  data() {
    return {}
  },
  props: {
    info: Object,
    type: String
  },
  watch: {
    type(val) {
      console.log(val)
    }
  },
  methods: {
    // 对象查看
    viewObjectInfo(
      objectType,
      instanceUri,
      objectUri,
      name,
      displayName,
      icon,
      belongGroup
    ) {
      let currentUrl = window.location.href
      currentUrl = currentUrl.split('#')[0]
      currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}&belongGroup=${belongGroup}`
      window.open(currentUrl, '')
      // if (objectType == 'com.scistor.object.entity') {
      //     currentUrl = `${currentUrl}#/display?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}&belongGroup=${belongGroup}`
      //     window.open(currentUrl, '')
      // } else {
      //     currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}&belongGroup=${belongGroup}`
      //     window.open(currentUrl, '')
      // }
    }
  }
}
</script>
<style lang="scss" scoped>
.article-info:hover {
  background: #ecf5ff;
  padding: 10px 15px;
}
.weibo-info {
  margin: 5px 0;
  background: #fff;
  .user-container {
    padding: 5px 10px;
    display: flex;
    .user-icon {
      height: 48px;
      width: 48px;
      vertical-align: middle;
      border-radius: 48px;
    }
    .user-label {
      margin-left: 10px;
      line-height: 48px;
      flex: 1 1 100px;
      align-items: center;
      justify-content: space-between;
      h4 {
        display: inline-block;
        padding: 0 5px;
      }
      .fa-vimeo-square {
        background: yellow;
        color: red;
      }
      .tag {
        padding: 2px 8px;
      }
      .postTime {
        padding: 0px 5px;
        float: right;
      }
    }
  }
  .content {
    padding: 5px 10px 5px 72px;
    line-height: 20px;
  }
  .quantitative-statistics {
    padding: 5px 72px;
    .operation {
      margin-right: 15px;
      .fa {
        margin-right: 10px;
      }
    }
  }
}
.linkedin-info {
  margin: 5px 0;
  background: #fff;
  .user-container {
    padding: 5px 10px;
    display: flex;
    .user-icon {
      height: 48px;
      width: 48px;
      vertical-align: middle;
      border-radius: 48px;
    }
    .user-label {
      margin-left: 10px;
      line-height: 48px;
      flex: 1 1 100px;
      align-items: center;
      justify-content: space-between;
      h4 {
        display: inline-block;
        padding: 0 5px;
      }
      .tag {
        padding: 2px 8px;
      }
      .postTime {
        padding: 0px 5px;
        float: right;
      }
    }
  }
  .content {
    padding: 5px 10px 5px 72px;
    line-height: 20px;
  }
  .quantitative-statistics {
    padding: 10px 72px;
    .operation {
      margin-right: 15px;
      .fa {
        margin-right: 10px;
      }
    }
  }
}
.facebook-info {
  margin: 5px 0;
  background: #fff;
  .user-container {
    padding: 5px 10px;
    display: flex;
    .user-icon {
      height: 48px;
      width: 48px;
      vertical-align: middle;
      border-radius: 48px;
    }
    .user-label {
      margin-left: 10px;
      line-height: 48px;
      flex: 1 1 100px;
      align-items: center;
      justify-content: space-between;
      h4 {
        display: inline-block;
        padding: 0 5px;
        color: #409eff;
      }
      .postTime {
        padding: 0px 5px;
        float: right;
        right: 10px;
      }
    }
  }
  .content {
    padding: 5px 10px 5px 72px;
    line-height: 20px;
  }
  .quantitative-statistics {
    padding: 5px 72px;
    .operation {
      margin-right: 15px;
      .fa {
        margin-right: 10px;
      }
    }
  }
}
.twitter-info {
  margin: 5px 0;
  background: #fff;
  padding: 5px 0;
  .user-container {
    padding: 5px 10px;
    display: flex;
    .user-icon {
      height: 48px;
      width: 48px;
      vertical-align: middle;
      border-radius: 48px;
    }
    .user-label {
      margin-left: 10px;
      line-height: 48px;
      flex: 1 1 100px;
      align-items: center;
      justify-content: space-between;
      h4 {
        display: inline-block;
        padding: 0 5px;
        color: #409eff;
      }
      .postTime {
        padding: 0px 5px;
        float: right;
        right: 10px;
      }
    }
  }
  .content {
    padding: 5px 10px 5px 72px;
    line-height: 20px;
  }
  .quantitative-statistics {
    padding: 5px 72px;
    .operation {
      margin-right: 15px;
      .fa {
        margin-right: 10px;
      }
    }
  }
}
</style>
